import 'package:flutter/material.dart';
import 'package:flutter_demo/listView/res/listdata.dart';
import '../listView/res/listdata.dart';

//gridView.builder方法
class GridView_Main01 extends StatelessWidget {
  var dataAry = listData.toList();

  Widget _getItemBuilder(context, index) {
    return Container(
      decoration: BoxDecoration(border: Border.all(width: 1.0,color: Colors.red,style:BorderStyle.solid),borderRadius: BorderRadius.all(Radius.circular(10.0))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //图片
          ClipRRect(
            borderRadius: BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0),),
            child: Image.network( dataAry[index]["imageUrl"],fit: BoxFit.cover,),
          ),

          SizedBox(height: 5.0,),

          //标题
          Text(dataAry[index]["title"],style: TextStyle(fontSize: 17,fontWeight: FontWeight.bold, color: Colors.black),),

          SizedBox(height: 5.0,), 

          //副标题
          Text(dataAry[index]["author"],style: TextStyle(fontSize: 10, fontWeight: FontWeight.normal, color: Colors.grey),),

        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, crossAxisSpacing: 10.0, mainAxisSpacing: 10.0),
        itemBuilder: (context, index) {
          return this._getItemBuilder(context, index);
        },
        itemCount: dataAry.length,
    ),
    );
  }
}

//gridView.count方法
class GridView_Main02 extends StatelessWidget {
//获取childen
  List<Widget> _getChildren() {
    var childenAry = <Widget>[];
    for (var i = 0; i < listData.length; i++) {
      var container = Container(
        child: Image.network(
          listData[i]["imageUrl"],
          fit: BoxFit.cover,
        ),
      );
      childenAry.add(container);
    }
    return childenAry.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      scrollDirection: Axis.vertical, //滑动方向
      crossAxisCount: 2, //列数
      crossAxisSpacing: 10.0, //左右间距
      mainAxisSpacing: 10.0, //主轴间距间隔
      padding: EdgeInsets.fromLTRB(12.5, 10.0, 12.5, 0),
      children: _getChildren(),
    );
  }
}

//gridView.count方法
class GridView_Main03 extends StatelessWidget {
//获取childen
  List<Widget> _getChildren() {
    var tempList = listData.map((value) {
      return Container(
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
            border: Border.all(
              color: Colors.red,
              width: 1.0,
              style: BorderStyle.solid, //实心的线
            )),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //针对图片进行切圆角
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10.0),
                topRight: Radius.circular(10.0),
              ),
              child: Image.network(
                value["imageUrl"],
                fit: BoxFit.cover,
              ),
            ),

            SizedBox(
              height: 5.0,
            ),

            //标题
            Text(
              value["title"],
              maxLines: 3,
              style: TextStyle(
                  fontSize: 17.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black),
            ),

            SizedBox(
              height: 5.0,
            ),

            //作者
            Text(
              value["author"],
              maxLines: 1,
              style: TextStyle(
                  fontSize: 10.0,
                  fontWeight: FontWeight.normal,
                  color: Colors.grey),
            )
          ], //界面元素
        ), //竖直方向的布局
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      scrollDirection: Axis.vertical, //滑动方向
      crossAxisCount: 2, //列数
      crossAxisSpacing: 10.0, //左右间距
      mainAxisSpacing: 10.0, //主轴间距间隔
      padding: EdgeInsets.fromLTRB(12.5, 10.0, 12.5, 0),
      children: _getChildren(),
    );
  }
}
